<template>
{{#if page.psSysPFPlugin}}
    {{> @macro/plugins/view/view-use.hbs appPlugin=page.psSysPFPlugin}}
{{else}}
    {{#if page.psViewLayoutPanel.useDefaultLayout}}
    <AppBasisViewLayout :class="classNames" :openType="openType">
        <template #default>
            <div class="view-content__body__transfer">
                <div class="view-content__body__transfer__left deexpview">
                    <AppSplit
                        v-model="split"
                        class="app-vc-expbar"
                        mode="horizontal"
                        @move-end="handleSplitChange">
                        <template #left>
                            <div class="app-vc-expbar__left">
                            {{#each page.ctrls as | ctrl |}}
                            {{#eq ctrl.controlType 'TREEEXPBAR'}}
                                {{> @macro/widgets/tree-exp-bar-detail/tree-exp-bar-detail.hbs ctrl=ctrl page=page props="expMode='PICKUPVIEW'"}}
                            {{/eq}}
                            {{/each}}
                            </div>
                        </template>
                        <template #right>
                            <div class="app-vc-expbar__body">
                                {{#each page.ctrls as | ctrl |}}
                                {{#eq ctrl.controlType 'PICKUPVIEWPANEL'}}
                                <component
                                    v-if="store.navParam && store.navParam.navData"
                                    v-bind="model.ctrlParams.{{ctrl.psAppDataEntity.codeName}}{{ctrl.name}}"
                                    name="{{name}}"
                                    :is="{{ctrl.psAppDataEntity.codeName}}{{codeName}}PickupViewPanel"
                                    :context="store.navParam.navData.context"
                                    :viewParams="store.navParam.navData.viewParams"
                                    :closeView="store.closeView"
                                    :pLoadingHelper="store.loadingHelper"
                                    :pViewCtx="store.viewCtx"
                                    @ctrl-init="(name:string, ability:any) => { handleCtrlInit(controller, name, ability) }"
                                    @ctrl-action="(name:string, action:any, data:any) => { handleCtrlAction(controller, name, action, data) }"
                                    @ctrl-destroy="(name:string, data:any) => { handleCtrlDestroy(controller, name, data) }" />
                                {{/eq}}
                                {{/each}}
                            </div>
                        </template>
                    </AppSplit>
                </div>
                <div class="view-content__body__transfer__center">
                <AppButton type="primary" @click="handleMPickupViewPickButtonAction(controller, 'toRight')" :disabled="store.tempSelections.length === 0"><RightOutlined /></AppButton>
                <AppButton type="primary" @click="handleMPickupViewPickButtonAction(controller, 'toLeft')" :disabled="store.panelSelectedKeys.length === 0"><LeftOutlined /></AppButton>
                <AppButton type="primary" @click="handleMPickupViewPickButtonAction(controller, 'toAllRight')"><DoubleRightOutlined /></AppButton>
                <AppButton type="primary" @click="handleMPickupViewPickButtonAction(controller, 'toAllLeft')" :disabled="store.selections.length === 0"><DoubleLeftOutlined /></AppButton>
                </div>
                <div class="view-content__body__transfer__right">
                <div class="view-content__body__transfer__right__select">
                    <template v-for="item in store.selections" :key="item.srfkey">
                    <div :class="getPanelItemClass(item)" @click="handleMPickupViewAction(controller, 'panelItemClick', item)">
                        <span>\{{item.srfmajortext}}</span>
                    </div>
                    </template>
                </div>
                </div>
            </div>
        </template>
        <template #viewFooter>
            <div class="view-footer__buttons">
                <AppButton type="primary" :disabled="store.selections.length === 0" @click="handlePickupViewButtonAction(controller, 'confirm')">确认</AppButton>
                <AppButton @click="handlePickupViewButtonAction(controller, 'cancel')">取消</AppButton>
            </div>
        </template>
        {{> @macro/view/view-msg.hbs}}  
    </AppBasisViewLayout>
    {{else}}
    <div :class="classNames">
        {{#if page.psViewLayoutPanel.rootPSPanelItems}}
        {{#each page.psViewLayoutPanel.rootPSPanelItems as | panelItem |}}
        {{> @macro/widgets/panel-detail/include-panel.hbs type=panelItem.itemType item=panelItem isMultiData=false panel=page.psViewLayoutPanel page=page}}
        {{/each}}
        {{/if}}
    </div> 
    {{/if}}
{{/if}}
</template>
<script setup lang="ts">
// 基于template/src/views/\{{appModules}}/\{{pages@DEMPICKUPVIEW}}/\{{spinalCase page.codeName}}.vue.hbs生成
{{#if page.psViewLayoutPanel.useDefaultLayout}}
import { AppBasisViewLayout } from "@components/layout/basis-view-layout";
import { AppSplit } from '@components/common/split';
import { RightOutlined, LeftOutlined, DoubleRightOutlined, DoubleLeftOutlined } from '@ant-design/icons-vue';
{{> @macro/widgets/ctrl/import-ctrl.hbs ctrls=page.ctrls}}
{{else}}
import { AppCtrlPos, AppScrollContainer, AppSimpleFlexContainer, AppStandardContainer, AppTabPanel, AppTabPage } from '@components/layout-element/structure';
{{#if page.psViewLayoutPanel.viewProxyMode}}
{{> @macro/widgets/ctrl/import-ctrl.hbs ctrls=page.psViewLayoutPanel.psControls}}
{{else}}
{{> @macro/widgets/ctrl/import-ctrl.hbs ctrls=page.ctrls}}
{{/if}}
{{/if}}
import { model } from "./{{spinalCase page.codeName}}-model";
import { 
    useNavParamsBind, 
    useEventBind, 
    getViewClassNames, 
    handlePickupViewButtonAction, 
    handleMPickupViewPickButtonAction, 
    handleCtrlAction, 
    handleCtrlInit, 
    handleCtrlDestroy, 
    handleMPickupViewAction,
    setExpViewSplit,
{{#unless page.psViewLayoutPanel.useDefaultLayout}}
    handleComponentAction,
    {{#if page.psViewLayoutPanel.psControls}}
    {{#each page.psViewLayoutPanel.psControls as | ctrl |}}
    {{#eq ctrl.controlType 'TOOLBAR'}}
    handleToolbarItemClick,
    {{/eq}}
    {{/each}}
    {{/if}}
{{/unless}}
} from "@/hooks/use-view";
import { MPickupView2ActionType, MPickupView2Controller, IMPickupView2Ability, IMPickupView2ControllerParams, IMPickupView2Store, IMPickupView2Controller, IParam, IContext, ILoadingHelper, IEvent } from "@/core";
{{> @macro/view/view-props.hbs}}

{{> @macro/common/emit.hbs name="view" actionType="MPickupView2ActionType" ability="IMPickupView2Ability"}}

const split = ref(0.15);

//  处理分隔值变化
const handleSplitChange = () => {
    setExpViewSplit(model, split.value);
}

//  样式名称
const classNames = computed(() => {
    return getViewClassNames(model, props);
});

const params: IMPickupView2ControllerParams<MPickupView2ActionType, IMPickupView2Ability> = {
    name: props.name,
    model,
    evt,
    isLoadDefault: props.isLoadDefault,
    openType: props.openType,
    pLoadingHelper: props.pLoadingHelper,
    handler: (data: IMPickupView2Store) => { return reactive(data); }
}

{{> @macro/common/controller.hbs name="view" IController="IMPickupView2Controller" store="IMPickupView2Store" ability="IMPickupView2Ability" controller="MPickupView2Controller"}}

const getPanelItemClass = (item: IParam) => {
  return {
    'picker-item': true,
    'is-active': store.panelSelectedKeys.indexOf(item.srfkey) !== -1
  }
}
</script>
